@extends('layouts.app')

@section('content')
<link href="{{ asset('css/cropper.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('css/uploadCard.css') }}" rel="stylesheet" type="text/css">


<script src="{{ asset('js/cropper.min.js') }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ asset('js/uploadCard.js') }}" type="text/javascript" charset="utf-8"></script>
<script>
	
</script>
		<div class="container" id="crop-avatar">
            <!-- Current avatar -->
            <div style="text-align:center;color:#d9534f;margin:30px 0">提示：点击图片上传</div>
            <div class="avatar-view" title="上传我的二维码名片">
                @if(empty($user->business_card))
                <img src="{{ asset('images/upDefault.png') }}" alt="Avatar"/>
                @else
                <img src="{{ $user->business_card }}" alt="Avatar"/>
                @endif
            </div>

            <!-- Cropping modal -->
            <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <form class="avatar-form" action="{{ url('/uploadbusinesscard') }}" enctype="multipart/form-data" method="post">
                            <div class="modal-header">
                                <button class="close" data-dismiss="modal" type="button">&times;</button>
                                <h4 class="modal-title" id="avatar-modal-label">更换图片</h4>
                            </div>
                            <div class="modal-body">
                                <div class="avatar-body">

                                    <!-- Upload image and data -->
                                    <div class="avatar-upload">
                                        <input class="avatar-src" name="avatar_src" type="hidden"/>
                                        <input class="avatar-data" name="avatar_data" type="hidden"/>
                                        <label for="avatarInput">名片上传</label><br>
                                        <input class="avatar-input" id="avatarInput" name="avatar_file" type="file"/>
                                    </div>

                                    <!-- Crop and preview -->
                                    <div class="row">
                                        <div class="col-md-9">
                                            <div class="avatar-wrapper"></div>
                                        </div>
                                       <!--  <div class="col-md-3">
                                            <div class="avatar-preview preview-lg"></div>
                                            <div class="avatar-preview preview-md"></div>
                                            <div class="avatar-preview preview-sm"></div>
                                        </div> -->
                                    </div>

                                    <div class="row avatar-btns">
                                        <div class="col-xs-12 textAlign clear">
                                            <div class="btn-group fl">
                                                <button class="btn btn-warning" data-method="rotate" data-option="-15" type="button" title="Rotate -15 degrees">左旋转</button>
                                                <button class="btn btn-warning" data-method="rotate" data-option="15" type="button" title="Rotate 15 degrees">右旋转</button>
                                            </div>
                                            <div class="btn-group fr">
                                                <button class="btn btn-block avatar-save btn-danger" type="submit">保 &nbsp;&nbsp;&nbsp;存</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="modal-footer">
                              <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
                            </div> -->
                        </form>
                    </div>
                </div>
            </div><!-- /.modal -->

            <!-- Loading state -->
            <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
        </div>

<style>
    .vad { margin: 250px 0 5px; font-family: Consolas,arial,宋体,sans-serif; text-align:center;}
    .vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;}
    .vad a:hover { color: #fff; background-color: #000;}
    .thead { width: 728px; height: 90px; margin: 0 auto; border-bottom: 40px solid #fff;}
</style>

</div>
@endsection
